<template>
  <div class="app-container" >
    <!-- <div style="font-size: 20px; margin-bottom: 50px; text-align: center">
      <span>CMSAutoCreate终端</span>
      <el-divider></el-divider>
      <span>{{ tipMessage }}</span>
    </div> -->
    <el-row class="header-nav"> 
      <el-col class="header-nav-left" :span="12">
        <img src="static/img/newLogo.png" />
        <!-- <div class="newLogo"></div> -->
      </el-col> 
      <el-col class="header-nav-right" :span="12">
        <span>{{title}}</span>  
      </el-col>   
    </el-row>  
    <el-row class="main-section" :gutter="30">
      <!-- 身份证信息 -->
      <el-col class="main-section-left-box" :span="10" >
        <div class="left-box-mession">
          预申报后自动刷卡取飞(交柜请提前验箱) 
        </div> 
        <div class="left-box-center"> 
            <img src="static/img/swipe.png" />
        </div>  
      </el-col> 
      <el-col class="main-section-right-box" :span="14" >
        
        <!-- PCC卡信息 -->
        <div class="main-padding">
          <div class="bbox">
            <div  class="clearfix bt">
              <p>PCC卡信息</p>
            </div>
            <el-form ref="form" class="elForm" :model="form" label-width="120px">
              <el-form-item label="PCC卡号">
                <el-input v-model="form.permitNo" disabled></el-input>
              </el-form-item>

              <el-form-item label="车牌号">
                <el-input v-model="form.tractorNo" disabled></el-input>
              </el-form-item>
            </el-form>
          </div> 
          <div class="right-box">
            <img src="static/img/smile.png" style="float: left" />
            <div class="left-box-center2-mession">
              <span  v-bind:class="'color-' + showMessage.type">
                {{showMessage.msg}}
              </span>
            </div>  
          </div>
        </div>
      </el-col>

      <el-col class="main-section-bottom-box" :span="24">
          <!-- <img src="static/img/backdown2.gif" alt=""> -->
          <div class="bottom-box-title">
          <svg-icon iconClass="tips" style="margin:0 5%" />
            注意事项
          </div>
          <div class="bottom-box-tips"> 
            <!-- {{showMessage.tips}} --> 
            <div style="padding: 20px">
              <h3> 
                箱的放行信息将被写到您的IC卡中，
              刷卡成功后请取回您的卡并到电子闸处读卡
              </h3>
            </div>
          </div>
      </el-col>
    </el-row> 
  </div>
</template>
<script>

export default {
  props: {
      title: {
        type: String,
        default:  function() {
            return ''
        }
      }
  },
  data() {
    return { 
      showMessage: {
        msg: '请刷卡......',
        success: false,
        type: 'success',
        mession:'您的交柜未进行PAS申报(验箱的箱号未进行PAS申报)，请核查PAS申报资料',
        tips: '请不要在飞仔未打印完毕时拉扯飞仔纸,以免导致卡纸'
      },
      form: {
        name: '',
        idNo: '',
        saltIdNo: '',
        saltName: '',
        tractorNo: '',
        pccId: '',
        permitNo: '',
      }
    }
  },
  created() {

  },
  mounted() { 
  },
  methods: {
    showMsg(dt) {
      this.showMessage.msg = dt.msg
      this.showMessage.type = dt.type
    },
    setForm(form){ 
        this.form = form
    }
  },
}
</script>

<style scoped>
.line {
  text-align: center;
}

.app-container{
    padding: 0px;
}

.header-nav{
  width: 100%;
  height: 45px;
  padding:0 15px;
  background: linear-gradient(180deg, #F7FBFF 0%, #EBF0FF 100%);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -1px 2px 0px #B0B9CE;
}
.header-nav>.header-nav-left{
  cursor:pointer; 
}
.header-nav>.header-nav-left>img{
   height:35px;
   margin-top:5px;
}
.header-nav>.header-nav-right{
  height:100%; 
  padding-top: 7.5px;
  /* display:flex; */
  text-align: right;
  align-items:center;
}
.header-nav>.header-nav-right>span{
  font-size: 17px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #213767;
  line-height: 26px;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
}

.main-section{
  width:100%; 
  background:url('/static/img/bg.png');
  height:calc(100vh - 45px);
  overflow:hidden;
  background-size:100% 100%;
  background-repeat: no-repeat;
  padding:25px;
}

.main-section-right-box{
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 56%;
  padding-top: 30px;
  height: 68%; 
  float:right;
  padding:5%;
  line-height: 40px;
  flex-direction: column;
  display: flex;
  padding: 2%;
  justify-content: space-between;
}
 
div >>>.el-form-item__label{
  font-size: 18px;
  color:#213767; 
  font-weight: bold;
}
.right-box  {
  padding: 20px;  
  background:#fff; 
  width:100%;
  height:220px;
  margin-top: 5%;
  border-radius: 8px;
  padding-top:25px;
  padding-right:25px;
  overflow: hidden;
}
.right-box p{
  font-size: 13px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  font-size: 16px; 
  color: #e5e2e2; 
  line-height: 20px;
  margin:2%;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.main-section-left-box{
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 68%;
  float:left;
  display:flex;
  padding-top: 10px;
  align-items: center;
  flex-direction: column;
  /*实现水平居中*/
  justify-content: center;
  text-align: justify;
  justify-content: space-evenly; 
}

.main-padding{
  height: 400px;
}
.left-box-mession{ 
  font-size: 12px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
  height: 18px;
}
.left-box-center{
  width:90%;
  height:50%;
  position: relative;
  background:url('/static/img/bg2.png');
  border-radius: 15px;
  margin-top: 10%;
  padding-left: 15px;
  margin-bottom: 10%;
  /* left: 20px; */
  background-size: 100% 100%;
  float: left;
}


.smile{
  width: 90px;
  height: 80%;
  margin: 10px;
  background:url('/static/img/smile.png') ;
  background-size: 130px 125px;
}
  
.right-box >>> img{
  width: 100px;
  height: 100px;
  margin-top: 20px;
}

.swipe {
  /* width: 180px; */
  height: 80%;
  margin: 10px;
  margin-top: 60px;
  background:url('/static/img/swipe.png') no-repeat center ;
  background-size: 240px 140px;
}
.left-box-center2{
  width:90%;
  height:40%;
  position: relative;
  background:url('/static/img/bg3.png');
  border-radius: 15px;
  background-size: 100% 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0 5%;
}
.left-box-center2>img{
  height:50%;
  margin-right:5%;
}
.left-box-center2-mession{
  height:70%;
  font-size: 21px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #196CC8;
  display: flex;
  float: left;
  margin-left: 10px;
  max-width: 330px;
  align-items: center;
}
.left-box-center>img{
  position:absolute;
  width: 25%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.main-section-bottom-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.bottom-box-title{
  background:#fff;
  width: 15%;
  height: 20%;
  display:flex;
  align-items: center;
  justify-content:center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #3D89E7;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.bottom-box-tips{
  height:100%;
  width:80%;
  display:flex;
  align-items: center;
  justify-content:center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #FFFFFF;
}

.main-section-bottom-box{
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  margin-top:3%;
  padding: 20px;
  font-size: 15px;
}

.bottom-box-title{
  background:#fff;
  width: 15%;
  height: 20%;
  display:flex;
  align-items: center;
  justify-content:center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #3D89E7;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.color-green{
  color: green;
}
.color-blue{
  color: blue;
}
.bbox >>> .elForm{
  padding: 7px;
  background-color: #fff;
  border-radius: 5px; 
  height: 140px; 
  padding: 20px;
}
.bt{
  color: #fff;
}
.bottom-box-tips{
  height:100%;
  width:80%;
  display:flex;
  align-items: center;
  justify-content:center;
  font-size: 13px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #FFFFFF;
}
</style>
